<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<title>DEMO2</title>
		<link rel="stylesheet" href="css/ytui.css" />
		<script src="js/zepto.min.js"></script>
		<script src="js/html-size-calculation.js"></script>
		<script src="js/yui-slider.js"></script>
		<script>
			$(function() {
				$("#slider").yuiSlider();
			})
		</script>
	</head>

	<body class="bgf5 header-fixed nav-fixed">
		<header class="header-bar bg-main">
			<a href="#" class="header-left">
				<i class="icon icon-map-marker"></i>
				<span class="fz28">成都</span>
			</a>
			<h2 class="header-title">DEMO2</h2>
			<a href="#" class="header-left">
				<i class="icon icon-map-marker"></i>
			</a>
		</header>
		<section class="yui-slider" id="slider" style="height:8rem">
			<div class="yui-slider-content">
				<div>
					<a href="#">
						<img src="images/sd-banner.png" />
					</a>
					<div></div>
				</div>
				<div>
					<a href="#">
						<img src="images/sd-banner.png" />
					</a>
				</div>
			</div>
		</section>
		<div class="wrap">
			<div class="bgff yt yt-ac pt10 pb10 pl30 pr30 bt bb mt30">
				<div class="yt-f1 yt yt-ac pr30">
					<img class="db" src="images/img-q-cat1.png" />
				</div>
				<div class="yt-f1 pr10 fz24 tx-c">
					硬件问题
				</div>
				<div class="yt-f1 bl yt yt-ac pr30 pl30">
					<img class="db" src="images/img-q-cat2.png" />
				</div>
				<div class="yt-f1 fz24 tx-c">
					系统问题
				</div>
			</div>
			<div class="mt30 bgff bt bb pt pb tx-c">
				<ul class="yt">
					<li class="yt-f1 pt20 pb20 br bb">
						<span class="dib round size-s bg-main"><i class="icon icon-map"></i></span>
						<p class="fz24 pt10">一体机</p>
					</li>
					<li class="yt-f1 pt20 pb20 br bb">
						<span class="dib round size-s bg-orange"><i class="icon icon-user"></i></span>
						<p class="fz24 pt10">网络组建</p>
					</li>
					<li class="yt-f1 pt20 pb20 bb">
						<span class="dib round size-s bg-red"><i class="icon icon-card"></i></span>
						<p class="fz24 pt10">数据恢复</p>
					</li>
				</ul>

				<ul class="yt">
					<li class="yt-f1 pt20 pb20 br bb">
						<span class="dib round size-s bg-red"><i class="icon icon-home"></i></span>
						<p class="fz24 pt10">台式机</p>
					</li>
					<li class="yt-f1 pt20 pb20 br bb">
						<span class="dib round size-s bg-blue"><i class="icon icon-star"></i></span>
						<p class="fz24 pt10">笔记本</p>
					</li>
					<li class="yt-f1 pt20 pb20 bb">
						<span class="dib round size-s bg-green"><i class="icon icon-users"></i></span>
						<p class="fz24 pt10">服务器</p>
					</li>
				</ul>
				<ul class="yt">
					<li class="yt-f1 pt20 pb20 br bb">
						<span class="dib round size-s bg-main"><i class="icon icon-map"></i></span>
						<p class="fz24 pt10">一体机</p>
					</li>
					<li class="yt-f1 pt20 pb20 br bb">
						<span class="dib round size-s bg-orange"><i class="icon icon-user"></i></span>
						<p class="fz24 pt10">网络组建</p>
					</li>
					<li class="yt-f1 pt20 pb20 bb">
						<span class="dib round size-s bg-red"><i class="icon icon-card"></i></span>
						<p class="fz24 pt10">数据恢复</p>
					</li>
				</ul>
				<ul class="yt">
					<li class="yt-f1 pt20 pb20 br bb">
						<span class="dib round size-s bg-main"><i class="icon icon-map"></i></span>
						<p class="fz24 pt10">一体机</p>
					</li>
					<li class="yt-f1 pt20 pb20 br bb">
						<span class="dib round size-s bg-orange"><i class="icon icon-user"></i></span>
						<p class="fz24 pt10">网络组建</p>
					</li>
					<li class="yt-f1 pt20 pb20 bb">
						<span class="dib round size-s bg-red"><i class="icon icon-card"></i></span>
						<p class="fz24 pt10">数据恢复</p>
					</li>
				</ul>

				<ul class="yt">
					<li class="yt-f1 pt20 pb20 br">
						<span class="dib round size-s bg-blue"><i class="icon icon-map"></i></span>
						<p class="fz24 pt10">周边及配件</p>
					</li>
					<li class="yt-f1 pt20 pb20 br">
						<span class="dib round size-s bg-green"><i class="icon icon-user"></i></span>
						<p class="fz24 pt10">电脑组装</p>
					</li>
					<li class="yt-f1 pt20 pb20">
						<span class="dib round size-s bg-second"><i class="icon icon-more"></i></span>
						<p class="fz24 pt10">更多服务</p>
					</li>
				</ul>
			</div>
		</div>
		<nav class="nav mt40">
			<div class="nav-item active">
				<i class="icon icon-home fz42"></i>
				<span class="fz24">首页</span>
			</div>
			<div class="nav-item">
				<i class="icon icon-menu fz42"></i>
				<span class="fz24 db">订单</span>
			</div>
			<div class="nav-item">
				<i class="icon icon-heart fz42"></i>
				<span class="fz24 db">活动</span>
			</div>
			<div class="nav-item">
				<i class="icon icon-user fz42"></i>
				<span class="fz24 db">我的</span>
			</div>
		</nav>
	</body>

</html>